<template>
  <div class="add_hospital_page">
    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div
          class="menu_cell"
          :class="step == item.id ? 'menu_cell_active' : ''"
          v-for="(item, index) in menus"
          :key="index"
          @click="menuEvent(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addFormRules"
        class="add_form"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="医生名称：" prop="doctorName">
          <el-input v-model.trim="addForm.doctorName"></el-input>
        </el-form-item>
        <el-form-item label="医生职称：" prop="titleId">
          <!-- <el-input v-model="addForm.titleId"></el-input> -->
          <el-select v-model="addForm.titleId">
            <el-option
              v-for="(item, index) in doctorTitleList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在地：" prop="code">
          <!-- <el-input v-model="addForm.name"></el-input> -->
          <AreaSelect
            v-model="addForm.code"
            @change="onProvinceChange"
          ></AreaSelect>
        </el-form-item>
        <el-form-item label="从业时长：" prop="employmentDuration">
          <!-- <el-input v-model.number="addForm.employmentDuration"></el-input> -->
          <div class="unit_box">
            <el-input-number
              v-model="addForm.employmentDuration"
              :controls="false"
              class="number_input"
            ></el-input-number>
            <span class="unit_tips">年</span>
          </div>
        </el-form-item>
        <el-form-item label="执业地址：" prop="hospitalIds">
          <div class="develop_input">
            <el-select v-model="hospitalIds" filterable class="a_input">
              <el-option
                v-for="(item, index) in hospitalList"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
            <el-button
              type="default"
              icon="el-icon-plus"
              :disabled="!hospitalIds"
              @click="addHistory"
              >添加</el-button
            >
          </div>
          <div class="develop_history">
            <div
              class="cell"
              v-for="(item, index) in addForm.hospitalIds || []"
              :key="index"
            >
              <span>{{ item.name }}</span>
              <i class="el-icon-close" @click="removeHistory(item)"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item></el-form-item>
        <el-form-item label="医生头像：">
          <ImageUpload
            v-model="addForm.doctorLogo"
            tip="图片尺寸1:1,大小在1M以内"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="文字logo：">
          <el-input v-model.trim="addForm.textLogo" maxlength="4"></el-input>
          <div class="input_tips">
            如果没有logo，可填写3-4个字自动生成文字logo
          </div>
        </el-form-item>

        <el-form-item label="医师执业证：">
          <ImageUpload
            class="license_upload"
            v-model="addForm.practiceLicense"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="" label-width="0">
          <el-form-item label="证书编码：">
            <el-input v-model.trim="addForm.practiceLicenseNumber"></el-input>
          </el-form-item>
          <el-form-item label="医师级别：">
            <el-input v-model.trim="addForm.practiceLicenseLevel"></el-input>
          </el-form-item>
          <el-form-item label="执业范围：">
            <el-input v-model.trim="addForm.practiceBusinessScope"></el-input>
          </el-form-item>
          <el-form-item label="执业类型：">
            <el-input v-model.trim="addForm.practiceBusinessClass"></el-input>
          </el-form-item>
          <el-form-item label="发证机关：">
            <el-input
              type="textarea"
              v-model.trim="addForm.issuingAuthority"
              rows="3"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-form-item>

        <el-form-item label="医师资格证：">
          <ImageUpload
            class="license_upload"
            v-model="addForm.doctorCertificate"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="" label-width="0">
          <el-form-item label="证书编号：">
            <el-input v-model.trim="addForm.certificateNumber"></el-input>
          </el-form-item>
          <el-form-item label="是否换证：">
            <el-radio-group v-model="addForm.certificateChanged">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="从业年份：">
            <el-input v-model.trim="addForm.employmentYear"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="更多介绍：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.detailIntroduce" rows="5" resize="none"></el-input> -->
          <WangEditor v-model="addForm.detailIntroduce"></WangEditor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->

    <!-- 平台运营 开始 -->
    <div class="content" v-show="step == 2">
      <el-form
        :model="addForm"
        ref="secondForm"
        :rules="secondFormRules"
        class=""
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker
            v-model="addForm.orderTime"
            type="date"
            class="a_input"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model.trim="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input
            type="textarea"
            v-model.trim="addForm.seoKeywords"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input
            type="textarea"
            v-model.trim="addForm.seoDescription"
            class="a_area"
            rows="3"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 平台运营 end -->
  </div>
</template>
<script>
import AreaSelect from "@/components/province";
import AddressMap from "@/components/map";
import ImageUpload from "@/components/upload/upload.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import {
  ADD_QUALIFICATION_DOCTOR_INFO,
  EDIT_QUALIFICATION_DOCTOR_INFO,
  GET_QUALIFICATION_HOSPITAL_OPTIONS,
  GET_QUALIFICATION_DOCTOR_INFO,
} from "@/http/information";
import { deepClone, showToast } from "@/common/util";
import { GET_DOCTORTITLE_OPTIONS } from "@/http/configuration";
export default {
  components: {
    AreaSelect,
    AddressMap,
    ImageUpload,
    WangEditor,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "平台运营", id: 2 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      addFormRules: {
        doctorName: [
          { required: true, message: "请输入医生名称", trigger: "blur" },
        ],
        titleId: [
          { required: true, message: "请输入医生职称", trigger: "blur" },
        ],
        code: [{ required: true, message: "请选择所在地", trigger: "change" }],
        employmentDuration: [
          { required: true, message: "请输入从业时长", trigger: "blur" },
        ],
        hospitalIds: [
          { required: true, message: "请添加执业地址", trigger: "change" },
        ],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [
          { required: true, message: "请选择是否首页", trigger: "change" },
        ],
        initReadCnt: [
          { required: true, message: "请输入初始阅读数", trigger: "blur" },
        ],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      loading: false,
      hospitalList: [],
      hospitalIds: "",
      doctorTitleList: [],
    };
  },
  created() {
    this.getHospital();
    this.getDoctorTitle();
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.nextStep(row.id);
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 下一步
    nextStep(num) {
      let _this = this;
      let step = this.step;
      if (step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = 2;
        });
        return false;
      }
      _this.step = num;
    },

    // 获取详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_QUALIFICATION_DOCTOR_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 医生logo
        if (obj.doctorLogo && obj.doctorLogo.length) {
          obj.doctorLogo = obj.doctorLogo.split(",");
        }

        // // 医师执业证
        // if (obj.practiceLicense && obj.practiceLicense.length) {
        //   let practiceLicense = [];
        //   obj.practiceLicense.map((k) => {
        //     practiceLicense.push({
        //       name: k,
        //       url: BASEURL + k,
        //       path: k,
        //     });
        //   });
        //   obj.practiceLicense = practiceLicense;
        // }

        // // 医师资格证
        // if (obj.doctorCertificate && obj.doctorCertificate.length) {
        //   let doctorCertificate = [];
        //   obj.doctorCertificate.map((k) => {
        //     doctorCertificate.push({
        //       name: k,
        //       url: BASEURL + k,
        //       path: k,
        //     });
        //   });
        //   obj.doctorCertificate = doctorCertificate;
        // }
        let list = obj.hospitalQualificationList || [];
        if (list && list.length) {
          let hospitalIds = [];
          list.map((k) => {
            k.name = k.hospitalName;
            hospitalIds.push(k);
          });
          obj.hospitalIds = hospitalIds;
        }

        obj.code = [obj.province, obj.city, obj.district];
        delete obj.hospitalQualificationList;
        delete obj.keywords;
        delete obj.titleName;

        this.addForm = obj;
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 医生头像
      if (o.doctorLogo) {
        o.doctorLogo = o.doctorLogo.toString();
      }

      // // 医师执业证
      // if (o.practiceLicense && o.practiceLicense.length) {
      //   let practiceLicense = [];
      //   o.practiceLicense.map((k) => {
      //     practiceLicense.push(k.path);
      //   });
      //   o.practiceLicense = practiceLicense;
      // }

      // // 医师资格证
      // if (o.doctorCertificate && o.doctorCertificate.length) {
      //   let doctorCertificate = [];
      //   o.doctorCertificate.map((k) => {
      //     doctorCertificate.push(k.path);
      //   });
      //   o.doctorCertificate = doctorCertificate;
      // }

      // // 职称
      // if(obj.titleId){
      //   let list = this.doctorTitleList||[]
      //   let _title = list.find(k => k.id == obj.titleId)
      //   o.titleName = _title?_title.name:''
      // }

      // 省市区
      if (o.code && o.code.length) {
        o.province = o.code[0];
        o.city = o.code[1];
        o.district = o.code[2];
        delete o.code;
      }

      // 执业地址
      if (o.hospitalIds && o.hospitalIds.length) {
        let arr = [];
        o.hospitalIds.map((k) => {
          arr.push(k.id);
        });
        o.hospitalIds = arr;
      }

      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          EDIT_QUALIFICATION_DOCTOR_INFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }

        // 新增
        ADD_QUALIFICATION_DOCTOR_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 获取医院资质下拉列表
    getHospital() {
      GET_QUALIFICATION_HOSPITAL_OPTIONS().then((res) => {
        this.hospitalList = res.data || [];
      });
    },

    // 监听省市区
    onProvinceChange(e) {
      this.$set(this.addForm, "provinceName", e[0]);
      this.$set(this.addForm, "cityName", e[1]);
      this.$set(this.addForm, "districtName", e[2]);
    },

    // 添加
    addHistory() {
      let oList = this.hospitalList || [];
      let list = this.addForm.hospitalIds || [];
      let term = this.hospitalIds;
      let row = oList.find((k) => k.id == term);
      let idx = list.findIndex((k) => k.id == term);
      if (idx >= 0) {
        showToast({
          message: "该执业地址已存在",
        });
        return false;
      }
      list.push(row);
      this.$set(this.addForm, "hospitalIds", list);
      this.hospitalIds = "";
    },

    // 删除
    removeHistory(item) {
      let arr = this.addForm.hospitalIds || [];
      let list = arr.filter((k) => k.id != item.id);
      this.$set(this.addForm, "hospitalIds", list);
    },

    // 获取医生职称
    getDoctorTitle() {
      GET_DOCTORTITLE_OPTIONS().then((res) => {
        this.doctorTitleList = res.data || [];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>